<template>
	<view>
		<uni-navbar :title="'技能提升'"></uni-navbar>
		<!-- 筛选 -->
		<view class="shaixuan">
			<view class="s-search">
				<u-search v-model="keywords" input-align="left" placeholder="搜索客户姓名或者电话" :action-text="'查询'"
					height="50"></u-search>
			</view>
			<view class="s-s" @click="show = true">
				<image src="../../../static/application/qici/shaixuan.png" mode=""></image>筛选
			</view>
		</view>
		<view class="p-title">年份：2022</view>

		<!-- block -->
		<view class="p-block" v-for="(item,index) in 3" :key="index">
			<view class="p-b-1">
				<text>湖北分校 武汉押题班</text>
				<text>种植</text>
			</view>
			<view class="p-b-2">2022年 湖北分校</view>
			<view class="p-b-2">开始/结束时间：2022-08-12至2022-08-16</view>
			<view class="p-b-3">
				<view>
					目标招收:<text class="text">500人</text>
				</view>
			</view>
			<view class="p-b-3">
				<view>
					现总报名:<text class="text1">500人</text>
				</view>
			</view>
		</view>

		<!-- 筛选 -->
		<u-popup v-model="show" mode="bottom">
			<view class="pop-block">
				<u-form :model="form" label-width="180" label-align="right" :border-bottom="false">
					<u-form-item label="校区:" prop="xiaoqu" :border-bottom="false">
						<u-input border v-model="form.xiaoqu" type="select" disabled @click="xiaoquQuShow = true" placeholder="请选择内容" />
					</u-form-item>
					<u-form-item label="使用年份:" prop="year" :border-bottom="false">
						<u-input border v-model="form.year" disabled  type="select" @click="nianShow = true" placeholder="请选择内容"/>
					</u-form-item>
					<u-form-item label="自定义时间:" :border-bottom="false">
						<view class="f-time">
							<view class="start-time">
								<u-input border v-model="form.startTime" input-align="center" disabled @click="startShow = true" placeholder="开始时间"/>
							</view>
							<view class="start-">至</view>
							<view class="stop-time">
								<u-input border v-model="form.stopTime" input-align="center" disabled @click="stopShow = true" placeholder="结束时间"/>
							</view>
						</view>
					</u-form-item>
				</u-form>
				
			</view>
			<view class="p-bottom">
				<view>重置</view>
				<view>确认</view>
			</view>
		</u-popup>
		<!-- 校区 -->
		<u-select v-model="xiaoquQuShow" :list="xiaoList"></u-select>
		<!-- 年份 -->
		<u-select v-model="nianShow" :list="xiaoList"></u-select>
		<!-- 开始时间 -->
		<u-picker mode="time" v-model="startShow"></u-picker>
		<!-- 结束时间 -->
		<u-picker mode="time" v-model="stopShow"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: '',
				show: false,
				form: {
					xiaoqu: '',
					year: '',
					time: '',
					startTime: '',
					stopTime: ''
				},
				xiaoquQuShow: false,
				xiaoList: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				nianShow: false,
				nianList: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				startShow: false,
				stopShow: false
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">

	.shaixuan {
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx 40rpx 20rpx;

		.s-search {
			width: 600rpx;
		}

		.s-s {
			line-height: 54rpx;
			color: #999999;

			image {
				width: 28rpx;
				height: 26rpx;
				margin-right: 6rpx;
			}
		}
	}

	.p-title {
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #4D4D4D;
		line-height: 70rpx;
		padding-left: 30rpx;
	}

	.p-block {
		width: 100%;
		background-color: #fff;
		padding: 20rpx;
		line-height: 60rpx;
		border-bottom: 1rpx solid #e7e7e7;

		.p-b-1 {
			width: 100%;
			font-size: 28rpx;
			font-family: Source Han Sans SC;
			font-weight: 500;
			color: #4D4D4D;
			display: flex;
			justify-content: space-between;
			text:nth-child(2){
				display: block;
				width: 67rpx;
				height: 30rpx;
				background: #FF9600;
				border-radius: 13rpx;
				font-size: 20rpx;
				font-family: Source Han Sans SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 30rpx;
				text-align: center;
			}
		}

		.p-b-2 {
			font-size: 24rpx;
			font-family: Source Han Sans SC;
			font-weight: 400;
			color: #999999;
		}

		.p-b-3 {
			font-size: 24rpx;
			font-family: Source Han Sans SC;
			font-weight: 400;
			color: #999999;
			display: flex;
			justify-content: space-between;

			.text {
				color: #EF1A1A;
			}

			.text1 {
				color: #26DE0C;
			}
		}
	}
	
	.pop-block{
		padding: 20rpx 30rpx;
	}
	
	.f-time{
		display: flex;
		justify-content: space-between;
		.start-{
			padding: 0 20rpx;
		}
	}
	
	.p-bottom{
		display: flex;
		text-align: center;
		line-height: 80rpx;
		view:nth-child(1){
			width: 50%;
			height: 80rpx;
			background-color: #e7e7e7;
		}
		
		view:nth-child(2){
			width: 50%;
			height: 80rpx;
			background-color: #1e5ff5;
			color: #fff;
		}
	}
</style>
